<template>
  <div class="dataSummary">
    <collapse-box>
      <region-tree @selected="treeSelected"/>
    </collapse-box>
    <div style="flex: 1;overflow: auto">
      <el-card>
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between">
          <n-tab :options="[{label:'调查数量'},{label:'调查审核通过率'},{label:'调查机构调查上报统计'}]" @click="itemClick"/>
          <div style="display: flex;align-items: center;gap: 10px">
            <span style="color: red;font-size: 14px;font-weight: bold;max-width: 400px;text-align: right" v-if="activeIndex===0">注:调查数量=本级及下级填报数量更新频率为每天5:00、22:00更新</span>
            <span style="color: red;font-size: 14px;font-weight: bold;max-width: 400px;text-align: left" v-if="activeIndex===1">注:审核通过率=本级(审核通过+已上报)数量/(本级填报+下级上报)数量;更新频率为每天5:00、22:00更新</span>
            <span style="color: red;font-size: 14px;font-weight: bold;max-width: 400px;text-align: right" v-if="activeIndex===2">注:上报统计=县级上报数量/所辖县级数量;</span>
            <el-button plain type="primary" size="small" @click="downloadHandler">导出</el-button>
          </div>
        </div>
        <data-amount v-if="activeIndex===0" :area-data="areaData"/>
        <data-rate v-if="activeIndex===1" :area-data="areaData"/>
        <data-reported v-if="activeIndex===2" :area-data="areaData"/>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import NTab from "@/components/NTab.vue";
import DataAmount from "@/views/dataShow/components/DataAmount.vue";
import DataRate from "@/views/dataShow/components/DataRate.vue";
import DataReported from "@/views/dataShow/components/DataReported.vue";
import RegionTree from "@/views/region/components/RegionTree.vue";
import CollapseBox from "@/components/CollapseBox.vue";
import {investDataExport,approvalPassExport,reportStatisticExport} from "@/api/dataSummary";
@Component({
  components: {
    RegionTree,
    NTab,
    DataAmount,
    DataRate,
    DataReported,
    CollapseBox
  }
})
export default class dataSummary extends Vue {
  activeIndex: any = 0;
  areaData:any = {};
  itemClick(item:any) {
    this.activeIndex = item.index
  }
  treeSelected(row){
    this.areaData = {...row}
  }

  downloadHandler(){
    const { areaId,workId } = this.areaData

    switch(this.activeIndex){
      case 0:
        investDataExport({areaId,workId});
        break;
      case 1:
        approvalPassExport({areaId,workId});
        break;
      case 2:
        reportStatisticExport({areaId,workId});
        break;
    }
  }
}
</script>
<style lang="scss" scoped>
.dataSummary {
  display: flex;
  gap: 10px;
}
</style>
